import React, { Component,lazy, Suspense } from 'react'
import './role.scss'
import { Button} from 'antd';
import Loading from '../../../components/common/Loading'

const CheckRole = lazy(() => import('../../../components/content/role/CheckRole'))
const AddRole = lazy(() => import('../../../components/content/role/AddRole'))

export default class Role extends Component {
    state = {
        showElem: 0
    }
    //组件显示的方法
    showCommpent = (num) => {
        return () => {
            this.setState({ showElem: num })
        }
    }
    render() {
        const { showElem } = this.state
        return (
            <div id="role">
                <Button type="primary" size='large' onClick={this.showCommpent(0)}>增加角色</Button>
                <Button type="primary" size='large' className="btn-green" onClick={this.showCommpent(1)}>查看角色</Button>
                <Suspense fallback={<Loading />}>
                    {
                        (() => {
                            switch (showElem) {
                                case 0:
                                    return <AddRole></AddRole>
                                case 1:
                                    return <CheckRole></CheckRole>
                                default:
                                    break;
                            }
                        })()
                    }
                </Suspense>
            </div>
        )
    }
}
